<template>
    <div class="ODBody wap">
      <x-header v-if="!this.$fromApp(this)||this.$route.query.push==1" class="whiteTheme fixedHead" :left-options="{backText: '',preventGoBack:true}" @on-click-back="goBack">订单详情</x-header>
      <div class="main">
        <scroller style="margin: 0.1rem 0 1rem">
          <div class="customerInfo display-flex flex-direction-row align-items-center justify-content-flex-justify">
            <div class="addressLogo display-flex flex-direction-row align-items-center justify-content-flex-center">
              <img src="../../assets/img/cart/icon_01.png" alt="">
            </div>
            <div class="customerNameAndAddress display-flex flex-direction-column">
              <div class="customerName display-flex flex-direction-row align-items-flex-end">
                <p>{{orderData.receiverName}}</p>
                <span>{{orderData.receiverMobile}}</span>
              </div>
              <div class="customerAddress">
                <span>{{orderData.receiverAddr}}</span>
              </div>
            </div>
          </div>
          <div class="orderDetailBox">
            <div class="orderTitle display-flex flex-direction-row align-items-center justify-content-flex-justify">
              <div class="orderTitleL display-flex flex-direction-row align-items-center justify-content-flex-center">
                <img :src="(orderData.buyerDistributorVO&&orderData.buyerDistributorVO.logo)?orderData.buyerDistributorVO.logo:null" alt="">
              </div>
              <div class="orderTitleR">
                <div style="font-size: 14px;font-weight: bold;color: #333333" class=" display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <p class="orderTitleRNameText">{{(orderData.buyerDistributorVO&&orderData.buyerDistributorVO.name)?orderData.buyerDistributorVO.name:null}}</p>
                  <p v-if="orderData.authState==0&&orderData.completeState==1">待确认</p>
                  <p v-else>{{orderData.completeState==0?'已取消':(orderData.completeState==2?'已完成':(orderData.payState==0?'未支付':'已支付'))}}</p>
                </div>
                <div style="font-size: 12px;" class=" display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <span style="color: #666666;">{{orderData.creTime}}</span>
                  <div class=" display-flex flex-direction-row">
                    <span v-if="orderData.completeState==0" :style="{color:(orderData.payState==0?'#FAB945':'#4DC0A1')}">[{{orderData.payState==0?'未支付':'已支付'}}]</span>
                    <span :style="{color:(orderData.deliverState==0?'#FAB945':'#4DC0A1')}">[{{orderData.deliverState==0?'未配送':'已配送'}}]</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="hr"></div>
            <div class="orderContent">
              <ul class="orderList">
                <li v-for="(item,index) in (orderData.saleOrderDetailVOList||'').slice(0,3)" :key="index" class="orderItem display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <div class="orderItemImg display-flex flex-direction-row align-items-center justify-content-flex-justify">
                    <img :src="item.goodsPic" alt="">
                  </div>
                  <div class="orderItemInfo display-flex flex-direction-column">
                    <p class="shopName">[{{item.brandName}}] {{item.goodsName}}</p>
                    <div class="unit">
                      <span>{{item.goodsSpec}}</span>
                    </div>
                    <div v-if="orderData.authState==1" class=" display-flex flex-direction-row align-items-center justify-content-flex-justify">
                      <div v-if="item.taxPrice&&item.taxPrice!=0" class="display-flex flex-direction-row">
                        <span>￥</span>
                        <span>{{item.taxPrice}}</span>
                        <span>/{{item.unitName}}</span>
                      </div>
                      <div v-else>
                        <span v-if="item.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                        <span v-else style="color: #FC6E51;font-size: 11px">询价</span>
                      </div>
                      <div class="display-flex flex-direction-row">
                        <span>×</span>
                        <p>{{item.num}}</p>
                      </div>
                    </div>
                    <div v-if="orderData.authState==0">
                      <div v-if="orderData.completeState==1" class="editInfo display-flex flex-direction-row align-items-center justify-content-flex-justify">
                        <div v-if="item.activityGoodsId!=null">
                          <div v-if="item.goodsType==1" class="display-flex flex-direction-row">
                            <span>￥</span>
                            <span>{{item.taxPrice}}</span>
                            <span>/{{item.unitName}}</span>
                          </div>
                          <div v-else>
                            <span v-if="item.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                          </div>
                        </div>
                        <div v-else>
                          <div v-if="item.goodsType==1">
                            <div v-if="item.enquiry==1" class="display-flex flex-direction-row">
                              <span>￥</span>
                              <input type="number" class="editNum" v-model="item.taxPrice">
                              <span>&nbsp;/{{item.unitName}}</span>
                            </div>
                            <div v-else class="display-flex flex-direction-row">
                              <span>￥</span>
                              <span>{{item.taxPrice}}</span>
                              <span>/{{item.unitName}}</span>
                            </div>
                          </div>
                          <div v-else>
                            <span v-if="item.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                          </div>
                        </div>
                        <div class="display-flex flex-direction-row">
                          <span >{{item.activityGoodsId==null?'数量：':'×'}}</span>
                          <input v-if="item.activityGoodsId==null" type="number" class="editCount" v-model="item.num">
                          <p v-else>{{item.num}}</p>
                        </div>
                      </div>
                      <div v-if="orderData.completeState!=1" class=" display-flex flex-direction-row align-items-center justify-content-flex-justify">
                        <div v-if="item.taxPrice&&item.taxPrice!=0" class="display-flex flex-direction-row">
                          <span>￥</span>
                          <span>{{item.taxPrice}}</span>
                          <span>/{{item.unitName}}</span>
                        </div>
                        <div v-else>
                          <span v-if="item.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                          <span v-else style="color: #FC6E51;font-size: 11px">询价</span>
                        </div>
                        <div class="display-flex flex-direction-row">
                          <span>×</span>
                          <p>{{item.num}}</p>
                        </div>
                      </div>
                    </div>

                  </div>
                </li>
                <template v-if="orderData.loadMore">
                <li v-for="(item,index) in (orderData.saleOrderDetailVOList||'').slice(3)" :key="'loadMore'+index" class="orderItem display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <div class="orderItemImg display-flex flex-direction-row align-items-center justify-content-flex-justify">
                    <img :src="item.goodsPic" alt="">
                  </div>
                  <div class="orderItemInfo display-flex flex-direction-column">
                    <p class="shopName">[{{item.brandName}}] {{item.goodsName}}</p>
                    <div class="unit">
                      <span>{{item.goodsSpec}}</span>
                    </div>
                    <div v-if="orderData.authState==1" class=" display-flex flex-direction-row align-items-center justify-content-flex-justify">
                      <div v-if="item.taxPrice&&item.taxPrice!=0" class="display-flex flex-direction-row">
                        <span>￥</span>
                        <span>{{item.taxPrice}}</span>
                        <span>/{{item.unitName}}</span>
                      </div>
                      <div v-else>
                        <span v-if="item.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                        <span v-else style="color: #FC6E51;font-size: 11px">询价</span>
                      </div>
                      <div class="display-flex flex-direction-row">
                        <span>×</span>
                        <p>{{item.num}}</p>
                      </div>
                    </div>
                    <div v-if="orderData.authState==0&&orderData.completeState==1" class="editInfo display-flex flex-direction-row align-items-center justify-content-flex-justify">
                      <div v-if="item.activityGoodsId!=null">
                        <div v-if="item.goodsType==1" class="display-flex flex-direction-row">
                          <span>￥</span>
                          <span>{{item.taxPrice}}</span>
                          <span>/{{item.unitName}}</span>
                        </div>
                        <div v-else>
                          <span v-if="item.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                        </div>
                      </div>
                      <div v-else>
                        <div v-if="item.goodsType==1">
                          <div v-if="item.enquiry==1" class="display-flex flex-direction-row">
                            <span>￥</span>
                            <input type="number" class="editNum" v-model="item.taxPrice">
                            <span>&nbsp;/{{item.unitName}}</span>
                          </div>
                          <div v-else class="display-flex flex-direction-row">
                            <span>￥</span>
                            <span>{{item.taxPrice}}</span>
                            <span>/{{item.unitName}}</span>
                          </div>
                        </div>
                        <div v-else>
                          <span v-if="item.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                        </div>
                      </div>
                      <div class="display-flex flex-direction-row">
                        <span >{{item.activityGoodsId==null?'数量：':'×'}}</span>
                        <input v-if="item.activityGoodsId==null" type="number" class="editCount" v-model="item.num">
                        <p v-else>{{item.num}}</p>
                      </div>
                    </div>
                  </div>
                </li>
                </template>
                <div v-if="(orderData.saleOrderDetailVOList||'').length>3" class="loadMore display-flex flex-direction-row justify-content-flex-center align-items-center">
                  <p v-if="!orderData.loadMore" class="display-flex flex-direction-row justify-content-flex-center align-items-center" @click="loadMoreFn(orderData)">
                    <span style="color: #666666">共有{{orderData.saleOrderDetailVOList.length}}条信息</span>
                    <img src="../../assets/img/cart/down.png" alt="" style="width: .2rem;height: .25rem;margin-left: .1rem">
                  </p>
                  <p v-else class="display-flex flex-direction-row justify-content-flex-center align-items-center" @click="loadMoreFn(orderData)">
                    <span style="color: #666666">收&nbsp;&nbsp;起</span>
                  </p>
                </div>
              </ul>
              <div class="hr"></div>
              <div class="priceDetail">
                <div class="display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <p style="color: #333333;font-size: 15px">订单金额</p>
                  <p style="color: #333333;font-size: 14px">￥{{orderData.goodsAmount}}</p>
                </div>
                <div class="display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <p style="color: #333333;font-size: 15px">红包抵扣</p>
                  <p style="color: #FB6E52;font-size: 14px"> - ￥{{orderData.redPacketAmount}}</p>
                </div>
                <div class="display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <p style="color: #333333;font-size: 15px">优惠金额</p>
                  <p style="color: #FB6E52;font-size: 14px"> - ￥{{orderData.discountAmount}}</p>
                </div>
                <div class="display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <p style="color: #333333;font-size: 15px">服务加价</p>
                  <p style="color: #333333;font-size: 14px">￥{{orderData.serviceAmount}}</p>
                </div>
              </div>
              <div class="hr"></div>
              <div class="allPrice display-flex flex-direction-row align-items-center justify-content-flex-justify">
                <div> </div>
                <p>{{orderData.payState==1?'实付款：':'待付款：'}}￥<span>{{orderData.realAmount}}</span></p>
              </div>
            </div>
          </div>
          <div class="orderNum display-flex flex-direction-row align-items-center justify-content-flex-justify">
            <div style="margin-left: .2rem">
              <p class="title">订单编号：</p>
            </div>
            <div style="margin-right: .2rem" class="display-flex flex-direction-row align-items-end justify-content-flex-center">
              <span class="num">{{orderData.orderNo}}</span>
              <div class="copyBtn display-flex flex-direction-row align-items-center justify-content-flex-center" @click="copyOrderNo">
                <span>复制</span>
              </div>
            </div>
          </div>
          <div class="orderStatus display-flex flex-direction-row align-items-center justify-content-flex-justify">
            <div style="margin-left: .2rem">
              <p class="title">订单状态跟踪：</p>
            </div>
            <div @click="goTrack" style="margin-right: .2rem" class="display-flex flex-direction-row align-items-end justify-content-flex-center">
              <img style="width: .14rem;height: .26rem" src="../../assets/img/cart/moreRight.png" alt="">
            </div>
          </div>
          <!--<div class="uploadBox display-flex flex-direction-row">-->
          <!--<div>-->
          <!--<p style="margin-left: .3rem;margin-top: .2rem">附件：</p>-->
          <!--</div>-->
          <!--<div style="height: 1.6rem;margin-top: .2rem;width: 5.5rem;">-->
          <!--<ul class="display-flex flex-direction-row align-items-center justify-content-flex-end">-->
          <!--<li>-->
          <!--<img src="../../assets/img/cart/goodsDemoImg.jpg" alt="">-->
          <!--</li>-->
          <!--<li>-->
          <!--<img src="../../assets/img/cart/goodsDemoImg.jpg" alt="">-->
          <!--</li>-->
          <!--<li>-->
          <!--<img src="../../assets/img/cart/uploadImg.png" alt="">-->
          <!--</li>-->
          <!--</ul>-->
          <!--</div>-->
          <!--</div>-->
          <div class="msgBox">
            <div class=" display-flex flex-direction-row">
              <div class="title"><p>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</p></div>
            </div>
            <div class="memo">
              <p >{{orderData.memo}}</p>
            </div>
            <div class=" display-flex flex-direction-row">
              <div class="title">
                <p>我的留言：</p>
              </div>
            </div>
            <div class="msg display-flex flex-direction-column">
              <div class="msgItem" v-for="(item, index) in orderData.saleOrderCommentVOList" :key="index">
                <p v-if="item.buyerId"><span style="color: #527DD9">买家留言：</span>{{decodeURIComponent(item.comment)}}</p>
                <p v-if="item.sellerId" class="sellMsgBox">{{decodeURIComponent(item.comment)}}</p>
              </div>
              <div class="submitMsg display-flex flex-direction-row">
                <input type="text" v-model="context" placeholder="请输入留言信息">
              </div>
            </div>
            <p @click="submitAll" class="submitBtn display-flex flex-direction-row align-items-center justify-content-flex-center">
              <span v-if="this.orderData.authState==0&&orderData.completeState==1">确认订单</span>
              <span v-else>留言发送</span>
            </p>
          </div>
          <div style="height: 0.5rem"></div>
        </scroller>
      </div>
      <div v-if="orderData.authState==1" class="operationGroup display-flex flex-direction-row">
        <div @click="showEditStatePopup" class="operationLeft operationGroupItme display-flex flex-direction-row align-items-center justify-content-flex-center">
          <img src="../../assets/img/cart/editState.png" alt="">
          <p>修改状态</p>
        </div>
        <div class="display-flex flex-direction-row align-items-center justify-content-flex-center">
          <span style="color: #DDDDDD">|</span>
        </div>
        <div @click="showEditMoneyPopup" class="operationRight operationGroupItme display-flex flex-direction-row align-items-center justify-content-flex-center">
          <img v-if="orderData.payState==0" src="../../assets/img/cart/editMoney.png" alt="">
          <img v-if="orderData.payState!=0" src="../../assets/img/cart/editMoney1.png" alt="">
          <p>修改金额</p>
        </div>
      </div>
      <div v-transfer-dom>
        <popup class="popupBody" v-model="editStatePopup" position="bottom" max-height="50%">
          <div class="popupBox display-flex flex-direction-column">
            <div class="popupTitle display-flex flex-direction-row align-items-center justify-content-flex-center">
              <p>修改状态</p>
            </div>
            <div class="popupGroup display-flex flex-direction-column align-items-center justify-content-flex-center">
              <div class="popupGroupItem display-flex flex-direction-row">
                <p>付款状态：</p>
                <select v-model="payState" @change="changePayState">
                  <option value ="0">待付款</option>
                  <option value ="1">已付款</option>
                </select>
              </div>
              <div class="popupGroupItem display-flex flex-direction-row">
                <p>配送状态：</p>
                <select v-model="deliveryState" @change="changeDeliveryState">
                  <option value ="0">未配送</option>
                  <option value ="1">已配送</option>
                </select>
              </div>
            </div>
          </div>
          <div>
            <x-button @click.native="changeState" style="background-color: #527DD9;border-radius: 0" type="primary">确 定</x-button>
          </div>
        </popup>
      </div>
      <div v-transfer-dom>
        <popup class="popupBody" v-model="editMoneyPopup" position="bottom" max-height="50%">
          <div class="popupBox display-flex flex-direction-column">
            <div class="popupTitle display-flex flex-direction-row align-items-center justify-content-flex-center">
              <p>修改金额</p>
            </div>
            <div class="popupGroup display-flex flex-direction-column align-items-center justify-content-flex-center">
              <div class="popupGroupItem display-flex flex-direction-row align-items-center justify-content-flex-center">
                <p>优惠金额：</p>
                <input type="number" v-model="discountAmount" placeholder="请填入金额" @keydown="changeInput">
                <span> 元</span>
              </div>
              <div class="popupGroupItem display-flex flex-direction-row align-items-center justify-content-flex-center">
                <p>服务加价：</p>
                <input type="number" v-model="serviceAmount" placeholder="请填入金额" @keydown="changeInput">
                <span> 元</span>
              </div>
            </div>
          </div>
          <div>
            <x-button @click.native="changePrice" style="background-color: #527DD9;border-radius: 0" type="primary">确 定</x-button>
          </div>
        </popup>
      </div>
      <toast v-model="showToast" position="middle" width="5rem" type="text">{{toastTest}}</toast>
    </div>
</template>

<script>
    import { Popup, Toast, Popover } from 'vux'
    let fromPage;
    export default {
      name: "orderDetails",
        data(){
          return{
            orderData:{},
            saleOrderId:'',
            contentHeight:'',
            isAppHeadHeight:'',
            editStatePopup:false,
            editMoneyPopup:false,
            payState:0,
            deliveryState:0,
            discountAmount:'',
            serviceAmount:'',
            showToast:false,
            toastTest:'',
            context:'',
            submitTextState:true,
            docmHeight:document.documentElement.clientHeight, //初始屏幕高度
          }
        },
        components:{
          Popup,
          Toast,
          Popover
        },
        mounted(){
          if (this.$platform() == 1) {
            window.onresize=()=>{
              if(document.body.clientHeight<this.docmHeight){
                if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
                  setTimeout(function () {
                    document.activeElement.scrollIntoViewIfNeeded();
                  }, 100);
                }
              } else {
                document.getElementsByClassName("_v-container")[0].scrollTop=0;
              }
            }
          }
          window.onresize=()=>{
            if(document.body.clientHeight<this.docmHeight){
              if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
                setTimeout(function () {
                  document.activeElement.scrollIntoViewIfNeeded();
                }, 100);
              }
            } else {
              document.getElementsByClassName("_v-container")[0].scrollTop=0;
            }
          }
          if(this.$fromApp(this)){
            this.contentHeight = (document.body.clientHeight*2/100-0.89) + 'rem';
            this.isAppHeadHeight = '0.1rem'
          }else{
            this.contentHeight = (document.body.clientHeight*2/100 - 1.98) + 'rem';
            this.isAppHeadHeight = '1.1rem'
          }
          this.saleOrderId = this.$route.query.id;
          this.getOrderDetail();
        },
        beforeRouteEnter(to, from, next) {
          fromPage = from;
          next();
        },
        methods:{
          loadMoreFn(item){
            item.loadMore = !item.loadMore;
          },
          changeInput(e) {
            // e.target.value = (e.target.value.match(/(^[\+\-]?\d{1,9})*(\.?\d{0,1})/g)[0]) || null
          },
          getOrderDetail(){
            this.$ajax.get('sale/detail',res=>{
              console.log("detail",res)
              if(res.code == '200'){
                res.data.loadMore = false;
                this.orderData = res.data;
                this.payState = res.data.payState;
                this.deliveryState = res.data.deliverState;
                if(this.$fromApp(this)){
                  this.$callJava({code:1017,localRefresh: true,noBack:true})
                }
              }else{
                this.$vux.toast.text(res.msg, 'center');
              }
            },{saleOrderId:this.saleOrderId});
          },
          copyOrderNo(){
            if(this.$fromApp(this)){
              this.$callJava({code:1005,orderNo:this.orderData.orderNo})
            }else{
              console.log(this.orderData.orderNo)
              const input = document.createElement('input');
              document.body.appendChild(input);
              input.setAttribute("value",this.orderData.orderNo);
              input.select();
              if(document.execCommand("copy")){
                document.execCommand("copy");
                this.$vux.toast.text('复制成功!');
              }
              document.body.removeChild(input);
            }
          },
          goTrack(){
            if(this.$fromApp(this)){
              this.$callJava({url:this.$webUrl+"order/saleOrderTrack?from=app&saleOrderId="+this.saleOrderId + '&orderNo=' + this.orderData.orderNo,title:'订单跟踪'})
            }else{
              this.$router.push({path:'/order/saleOrderTrack',query:{saleOrderId:this.saleOrderId,orderNo:this.orderData.orderNo}})
            }
          },
          showEditStatePopup(){
            if(this.orderData.completeState==2){
              this.editStatePopup = false;
              this.showToast = true;
              this.toastTest = '已完成的订单不能修改状态！';
            }else{
              this.editStatePopup = true;
            }

          // else if(this.orderData.completeState==0){
          //     this.editMoneyPopup = false;
          //     this.showToast = true;
          //     this.toastTest = '已取消的订单不能修改状态！';
          //   }
          },
          showEditMoneyPopup(){
            if(this.orderData.completeState==2){
              this.editMoneyPopup = false;
              this.showToast = true;
              this.toastTest = '已完成的订单不能修改金额！';
            }else if(this.orderData.completeState==0){
              this.editMoneyPopup = false;
              this.showToast = true;
              this.toastTest = '已取消的订单不能修改金额！';
            }else if(this.orderData.payState==1){
              this.editMoneyPopup = false;
              this.showToast = true;
              this.toastTest = '已支付的订单不能修改金额！';
            }else{
              this.editMoneyPopup = true;
            }
          },
          changePayState(){
            // console.log(this.payState)
          },
          changeDeliveryState(){
            // console.log(this.deliveryState)
          },
          changeState(){
            let params = {
              saleOrderId:this.saleOrderId,
              payState:this.payState,
              deliverState:this.deliveryState
            }
            this.$ajax.post('sale/change/state',params,res=>{
              // console.log(res);
              if(res.code == '200'){
                this.editStatePopup = false;
                this.getOrderDetail();
                if(this.$fromApp(this)){
                  this.$callJava({code:1017,localRefresh: true,noBack:true,})
                }
              }else{
                this.$vux.toast.text(res.msg, 'center');
              }
            })
          },
          changePrice(){
            // var regEn = /[`!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
            //   regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
            // if(regEn.test(this.discountAmount)||regCn.test(this.discountAmount)||regEn.test(this.serviceAmount)||regCn.test(this.serviceAmount)){
            //   this.showToast = true;
            //   this.toastTest = '请输入数字!';
            //   return;
            // }
            if(!/^\d{0,8}(\.\d{0,2})?$/g.test(this.discountAmount)){
              this.$vux.toast.text('整数部分最多8位，小数部分最多2位！', 'center');
              return;
            }
            if(!/^\d{0,8}(\.\d{0,2})?$/g.test(this.serviceAmount)){
              this.$vux.toast.text('整数部分最多8位，小数部分最多2位！', 'center');
              return;
            }
            if(this.discountAmount>(this.orderData.goodsAmount-this.orderData.redPacketAmount)){
              this.showToast = true;
              this.toastTest = '优惠金额不能大于订单金额!';
              return;
            }else{
              let params = {
                saleOrderId:this.saleOrderId,
                discountAmount:this.discountAmount,
                serviceAmount:this.serviceAmount
              }

              this.$ajax.post('sale/change/price',params,res=>{
                if(res.code == '200'){
                  this.editMoneyPopup = false;
                  this.getOrderDetail();
                  // if(this.$fromApp(this)){
                  //   this.$callJava({code:1003,localRefresh: true,})
                  // }
                }else{
                  this.$vux.toast.text(res.msg, 'center');
                }
              })
            }
          },
          editFn(){
            var editObj = {};
            var editArr = [];
            for (var i=0;i<this.orderData.saleOrderDetailVOList.length;i++){
              let goodsNum =this.orderData.saleOrderDetailVOList[i].num;

              if(isNaN(goodsNum)||goodsNum<0||!(/^\d+$/.test(goodsNum))){
                this.$vux.toast.text('商品数量必须为正整数', 'center');
                return;
              }

              let price = this.orderData.saleOrderDetailVOList[i].taxPrice;
              if(isNaN(price)||price<0||!/^\d{0,8}(\.\d{0,2})?$/g.test(price)){
                this.$vux.toast.text('商品价格整数部分最多8位，小数部分最多2位！', 'center');
                return;
              }

              var obj = {};
              obj.id = this.orderData.saleOrderDetailVOList[i].id;
              obj.num = this.orderData.saleOrderDetailVOList[i].num;
              obj.taxPrice = this.orderData.saleOrderDetailVOList[i].taxPrice;
              editArr.push(obj);
            }
            editObj.id = this.saleOrderId;
            editObj.saleOrderModifyDetailList = editArr;

            this.$ajax.post('sale/update/details',editObj,res=>{
              if(res.code == '200'){
                this.$ajax.get('sale/authOrder', ()=>{
                  this.orderData.authState = 1;
                  this.getOrderDetail();
                }, {saleOrderId: this.saleOrderId})
              }else{
                this.$vux.toast.text(res.msg, 'center');
              }
            },1);

          },
          submitText(){
            if(this.submitTextState){
              this.submitTextState = false;
              // if(this.context.trim()==''){
              //   this.context = '';
              //   this.$vux.toast.text('请输入信息!');
              //   this.submitTextState = true;
              //   return;
              // }
              if(this.context.trim()!=''){
                let params = {
                  saleOrderId:this.saleOrderId,
                  context:encodeURIComponent(this.context.trim())
                };
                this.$ajax.post('sale/order/comment',params,res=>{
                  if(res.code == '200'){
                    this.context = '';
                    this.submitTextState = true;
                    this.getOrderDetail();
                  }else{
                    this.$vux.toast.text(res.msg, 'center');
                  }
                })
              }
            }
          },
          submitAll(){
            if(this.orderData.authState == 0&&this.orderData.completeState==1){
              this.editFn();
              this.submitText();
              if(this.$fromApp(this)){
                this.$callJava({code:1017,localRefresh: true,noBack:true})
              }
            }else{
              this.submitText();
            }
          },
          goBack(){
            if(this.$route.query.push==1 || !fromPage || !fromPage.name){
              // this.$callJava({code:1007});
              this.$router.replace({
                path: "/order",
                query: {
                  from: this.$fromApp(this) ? "app" : "",
                  // id: this.sellerId,
                },
              });
            }else{
              this.$router.go(-1);
            }
          }
        }
    }
</script>

<style lang="less" type="text/less" scoped>
  ul>li{
    list-style: none;
  }
  .popupBody{
    z-index: 10000!important;
    background-color: #ffffff;
    .popupBox{
      .popupTitle{
        height: 1.1rem;
        color: #333333;
        font-size: 17px;
        font-weight: bold;
        border-bottom: 1px solid #EBEBEB;
      }
      .popupGroup{
        margin: .3rem 0;
        .popupGroupItem{
          margin: .2rem 0;
          font-size: 15px;
          color: #333333;
          input{
            width: 2.3rem;
            height: .8rem;
            text-indent: .2rem;
            margin-right: .1rem;
            border: 1px solid #DDDDDD;
            border-radius: 6px;
          }
          select{
            width: 2.4rem;
            height: .8rem;
            border: 1px solid #DDDDDD;
            text-indent: .2rem;
            -moz-appearance: none;
            -webkit-appearance: none;
            background: url("../../assets/img/cart/selectDownIcon.png") no-repeat 90% transparent;
            background-size: .2rem .2rem;
            padding-right: .1rem;
            margin-top: -0.15rem;
            border-radius: 6px;
          }
        }
      }
    }
  }

.ODBody{
  .fixedHead{
    /*position: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    width: 100%;
    z-index: 999;
  }
  .operationGroup{
    /*position: fixed;*/
    /*left: 0;*/
    /*bottom: 0;*/
    width: 100%;
    height: .88rem;
    border-top: 1px solid #DDDDDD;
    background-color: #F9F9F9;
    z-index: 999;
    .operationGroupItme{
      width: 50%;
      color: #333333;
      img{
        width: .32rem;
        height: .32rem;
        margin-right: .1rem;
      }
    }
  }
  .customerInfo{
    height: 1.85rem;
    margin: 0 .3rem .3rem;
    background-color: #FFFFFF;
    border-radius: 8px;
    .addressLogo{
      width: 1rem;
      height: 1.85rem;
      img{
        width: .28rem;
        height: .33rem;
      }
    }
    .customerNameAndAddress{
      width: 5.9rem;
      .customerName{
        p{
          color: #222222;
          font-size: 16px;
          font-weight: bold;
          margin-right: .1rem;
        }
        span{
          color: #999999;
          font-size: 15px;
        }
      }
      .customerAddress{
        color: #333333;
        font-size: 13px;
      }
    }
    .moreRight{
      width: .82rem;
      height: 1.85rem;
      img{
        width: .14rem;
        height: .26rem;
      }
    }
  }
  .orderDetailBox{
    margin: 0 .3rem .3rem;
    border-radius: 8px;
    background-color: #ffffff;
    .hr{
      width: 100%;
      height: 1px;
      background-color: #EBEBEB;
    }
    .orderTitle{
      width: 100%;
      height: 1.38rem;
      .orderTitleL{
        width: 1.26rem;
        img{
          width: .78rem;
          height: .78rem;
        }
      }
      .orderTitleR{
        width: 5.4rem;
        margin-right: .3rem;
        .orderTitleRNameText{
          width: 4rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .orderContent{
      margin: 0 .23rem;
      .orderList{
        .orderItem{
          margin-bottom: .1rem;
          .orderItemImg{
            height: 1.6rem;
            img{
              width: 1.4rem;
              height: 1.4rem;
            }
          }
          .orderItemInfo{
            width: 4.8rem;
            .shopName{
              color: #333333;
              font-size: 13px;
            }
            .unit{
              span{
                color: #666666;
                font-size: 10px;
                background-color: #EEEEEE;
                padding: 0 .2rem;
                height: .32rem;
                border-radius: .16rem;
              }
            }
            .editInfo{
              .editNum{
                 width: 1.2rem;
                 outline: none;
                 border: 1px solid #DDDDDD;
                 border-radius: 3px;
                 text-align: center;
               }
              .editCount{
                width: 0.8rem;
                outline: none;
                border: 1px solid #DDDDDD;
                border-radius: 3px;
                text-align: center;
              }
            }
          }
        }
        .loadMore{
          p{
            margin: 0.3rem 0;
            border: 1px solid #eeeeee;
            height: .6rem;
            border-radius: .3rem;
            padding: 0 .3rem;
          }
        }
      }
      .priceDetail{
        margin: .1rem 0;
      }
      .allPrice{
        height: 1rem;
        color: #333333;
        p{
          font-size: 13px;
        }
        span{
          font-size: 21px;
          font-weight: bold;
        }
      }
    }
  }
  .orderNum{
    margin: 0 .3rem .3rem;
    background-color: #FFFFFF;
    height: 1rem;
    border-radius: 8px;
    .title{
      color: #333333;
      font-size: 15px;
    }
    .num{
      color: #999999;
      font-size: 14px;
    }
    .copyBtn{
      color: #333333;
      font-size: 10px;
      height: .4rem;
      line-height: .4rem;
      border-radius: .2rem;
      padding: 0 .2rem;
      margin-left: .2rem;
      border: 1px solid #DDDDDD;
    }
  }
  .orderStatus{
    margin: 0 .3rem .3rem;
    background-color: #FFFFFF;
    height: 1rem;
    border-radius: 8px;
    .title{
      color: #333333;
      font-size: 15px;
    }
    img{
      margin-top: .1rem;
      margin-left: .1rem;
    }
  }
  .uploadBox{
    margin: 0 .3rem .3rem;
    background-color: #FFFFFF;
    height: 2.02rem;
    border-radius: 8px;
    ul>li{
      img{
        width: 1.3rem;
        height: 1.3rem;
        margin-top: 0.15rem;
        margin-left: 0.2rem;
      }
    }
  }
  .msgBox{
    margin: 0 .3rem .3rem;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: .2rem 0;
    .title{
      p{
        color: #333333;
        font-size: 15px;
        margin-left: .3rem;
      }
    }
    .memo{
      margin: .05rem .3rem;
      p{
        background-color: #F5F5F5;
        padding: .2rem 0;
      }
    }
    .msg{
      margin-left: .15rem;
      width: 6.5rem;
      font-size: 13px;
      margin-top: .05rem;
      .msgItem{
        width: 6.5rem;
        word-break: break-word;
        margin-top: .05rem;
        p{
          margin-bottom: .2rem;
        }
        .sellMsgBox{
          padding: .2rem;
          background-color: #F5F5F5;
        }
      }
      .submitMsg{
        input{
          width: 6.5rem;
          height: .64rem;
          outline: none;
          border: 1px solid #DDDDDD;
          text-indent: 10px;
          margin-right: .08rem;
          border-radius: 3px;
        }

      }
    }
    .submitBtn{
      width: 6.5rem;
      height: .9rem;
      text-align: center;
      line-height: .66rem;
      font-size: 14px;
      color: #FFFFFF;
      border-radius: 3px;
      background-color: #527DD9;
      margin-top: .2rem;
      margin-left: .15rem;
    }
  }
}
</style>
